<template>
  <div>
    <div class="box">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.title }}</div>
        <div :class="[{ cirle1: index == 2 || index == 3 }, 'cirle']">
          <div>{{ item.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: "总户数",
          count: 0,
        },
        {
          title: "总人数",
          count: 0,
        },
        {
          title: "累计受理",
          count: 0,
        },
        {
          title: "已办结",
          count: 0,
        },
      ],
      time: new Date().getTime(),
    };
  },
  mounted(){
    this.totalCount();
    this.dataStatistics();
  },
  methods:{
    totalCount(){
      let params = {
        time:this.time,
      }
      let result = this.$md5.transferValue(params);
      this.axios.post(this.stateUrl.dataModel.totalCount,{
        time:this.time,
        sign: this.$md5.val(result)
      }).then(res=>{
        this.list[0].count = res.data.data.totalCount;
        this.list[1].count = res.data.data.totalPeople;
      }).catch(()=>{})
    },
    dataStatistics(){
      let params = {
        time:this.time,
      }
      let result = this.$md5.transferValue(params);
      this.axios.post(this.stateUrl.dataModel.dataStatistics,{
        time:this.time,
        sign: this.$md5.val(result)
      }).then(res=>{
        this.list[2].count = res.data.data.count;
        this.list[3].count = res.data.data.dealCount;
      }).catch(()=>{})
    }
  },
};
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.2rem;
    margin-top:0.08rem;
    .title {
      margin-right: 0.24rem;
    }
    .cirle {
      background: url("../assets/ch1.png") no-repeat;
      background-size: 100% 100%;
      width: 0.97rem;
      height: 0.83rem;
      position: relative;
      div {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.24rem;
      }
      &.cirle1 {
        background: url("../assets/ch2.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>